<template>
  <product-item :list="dataList" />
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="total" />
  </div>
</template>
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

import ProductItem from "@/components/ProductItem.vue";

const dataList = ref([]);
const total = ref(0)

// 获取数据
const fetchData = async () => {
	const result = await axios.get('/data.json');
  
  // 筛选出华为的手机
  const data = result.data.data.filter(item => item.class === 'PINGGUO');

  dataList.value = data;
  total.value = data.length;
}

onMounted(() => {
	fetchData();
})


</script>

<style scoped>
.pagination {
  margin-top: 12px;
  display: flex;
  justify-content: end;
}

</style>

